<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>23软件技术1班李金斗23007625待办事项列表</title>
    <style>
        body{background-image: url(5.jpg);}
        * {
            margin: 0;
            padding: 0
        }

        .box {
            width: 500px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 100px auto;
            padding: 5px;

        }

        .inner {
            width: 500px;
            height: 300px;
            position: relative;
            overflow: hidden;
        }

        .inner img {
            width: 500px;
            height: 300px;
            vertical-align: top
        }

        ul {
            width: 1000%;
            position: absolute;
            list-style: none;
            left: 0;
            top: 0;
        }

        .inner li {
            float: left;

        }

        ol {
            position: absolute;
            height: 20px;
            right: 20px;
            bottom: 20px;
            text-align: center;
            padding: 5px;
        }

        ol li {
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            background-color: #fff;
            margin: 5px;
            cursor: pointer;

        }

        ol .current {
            background-color: rgb(60, 94, 205);
        }

        #arr {
            display: none;
        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #fff;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #000;
            opacity: 0.5;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
</head>

<body>
    <div class="box" id="box">
        <div class="inner">
          
            <ul>
                <li><a href="#"><img src="1.jpg" alt=""></a></li>
                <li><a href="#"><img src="3.jpg" alt=""></a></li>
                <li><a href="#"><img src="8.jpg" alt=""></a></li>
                <li><a href="#"><img src="八掛碧海.png" alt=""></a></li>
                <li><a href="#"><img src="蔡徐坤2.jpg" alt=""></a></li>

            </ul>

            <ol class="bar">

            </ol>
      
            <div id="arr">
                <span id="left">
                    < </span> <span id="right">
                        >
                </span>
            </div>

        </div>
    </div>
    <script>
        function my$(id) {
            return document.getElementById(id);
        }

        var box = my$("box");
        var inner = box.children[0];
        var ulObj = inner.children[0];
        var list = ulObj.children;
        var olObj = inner.children[1];
        var arr = my$("arr");
        var imgWidth = inner.offsetWidth;
        var right = my$("right");
        var pic = 0;

        for (var i = 0; i < list.length; i++) {
            var liObj = document.createElement("li");

            olObj.appendChild(liObj);
            liObj.innerText = (i + 1);
            liObj.setAttribute("index", i);


            liObj.onmouseover = function () {
     

                for (var j = 0; j < olObj.children.length; j++) {
                    olObj.children[j].removeAttribute("class");
                }
                this.className = "current";
                pic = this.getAttribute("index");
                animate(ulObj, -pic * imgWidth);
            }

        }


        olObj.children[0].className = "current";

        ulObj.appendChild(ulObj.children[0].cloneNode(true));

        var timeId = setInterval(onmouseclickHandle, 1000);

        box.onmouseover = function () {
            arr.style.display = "block";
            clearInterval(timeId);
        };
        box.onmouseout = function () {
            arr.style.display = "none";
            timeId = setInterval(onmouseclickHandle, 1000);
        };

        right.onclick = onmouseclickHandle;

        function onmouseclickHandle() {
         
            if (pic == list.length - 1) {
              
                pic = 0; 
                ulObj.style.left = 0 + "px"; 
            }
            pic++; 
            animate(ulObj, -pic * imgWidth); 
            
            if (pic == list.length - 1) {
          
                olObj.children[olObj.children.length - 1].className = "";
              
                olObj.children[0].className = "current";
            } else {
             
                for (var i = 0; i < olObj.children.length; i++) {
                    olObj.children[i].removeAttribute("class");
                }
                olObj.children[pic].className = "current";
            }
        }
        left.onclick = function () {
            if (pic == 0) {
                pic = list.length - 1;
                ulObj.style.left = -pic * imgWidth + "px";
            }
            pic--;
            animate(ulObj, -pic * imgWidth);
            for (var i = 0; i < olObj.children.length; i++) {
                olObj.children[i].removeAttribute("class");
            }
    
            olObj.children[pic].className = "current";
        };

    
        function animate(element, target) {
            clearInterval(element.timeId);
          
            element.timeId = setInterval(function () {
              
                var current = element.offsetLeft;
            
                var step = 10;
                step = current < target ? step : -step;
               
                current += step;
                if (Math.abs(current - target) > Math.abs(step)) {
                    element.style.left = current + "px";
                } else {
               
                    clearInterval(element.timeId);
             
                    element.style.left = target + "px";
                }
            }, 10);
        }
    </script>
</body>

</html>
